<template>
	<show-table api="/mp3" title="音频媒体数据" :info="info">
		<template #button>
			<el-button type="primary" :loading="isLoading" @click="forceUpdate"
				>强制更新</el-button
			>
		</template>
	</show-table>
	<home-chart :data="data"></home-chart>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import { ElNotification } from "element-plus";
import { forceUpdateMP3 } from "@/utils/useMP3";
import { mp3DataOutline } from "@/utils/mp3Data";
import { fetchMP3List, IMP3Data } from "@/utils/useRequest";

import showTable from "./show-table.vue";
import homeChart from "./home-chart.vue";

const isLoading = ref(false);
const data = ref([] as IMP3Data[]);
const info = computed(() => mp3DataOutline(data.value));

fetchMP3List().then((res) => {
	data.value = res.data;
});

function forceUpdate() {
	isLoading.value = true;
	forceUpdateMP3()
		.then(() => {
			setTimeout(() => {
				fetchMP3List().then((res) => {
					data.value = res.data;
				});
				ElNotification({
					message: `更新成功`,
					type: "success",
				});
				isLoading.value = false;
			}, 1000);
		})
		.catch((err) => {
			ElNotification({
				message: `${err}`,
				type: "error",
			});
			isLoading.value = false;
		});
}
</script>
